<template>
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      router
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">

      <div  v-for="(item,i) in menu_list" :key="'aa'+i" > 
        <el-menu-item :index="item.path"  v-if="!item.children">
        <i :class="item.icon"></i>
        <span slot="title">{{item.title}}</span>
      </el-menu-item>
      </div>

        
      <div  v-for="(item,i) in menu_list" :key="'sub'+i">  
          <el-submenu  :index="item.path" v-if="item.children"  >
            <template slot="title">
                  <i :class="item.icon"></i>
                  <span slot="title">{{item.title}}</span>
            </template>
          <el-menu-item v-for="(ite,j) in item.children" :key="j"  :index="ite.path">{{ite.title}}</el-menu-item>
        </el-submenu>
      </div>
    </el-menu>
</template>

<script>
import {menu_list} from "../router"
    export default {
        data() {
            return {
                menu_list:menu_list
            }
        },
    }
</script>

<style scoped>

</style>